<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../../../../src/css/common/reset.css">
    <link rel="stylesheet" href="com-load.css">
    <script src="../../lib/jquery.js"></script>
    <script src="com-load.js"></script>
</head>
<body>

<div class="demo clearfix">


    <input type="button" value="点击我" onclick="a1()" style="z-index:100;">

    <input type="button" value="点击我" onclick="a2()" style="z-index:100;">

    <input class="ml30" type="button" value="点击我2" onclick="cancel1()" style="z-index:100;">
    <input class="ml30" type="button" value="点击我2" onclick="cancel2()" style="z-index:100;">
    <div id="ha" style="width:400px;height:400px;background-color: #95ada8;position: relative;">

    </div>

    <!--<div class="load-main2">
        <div class="animate-main2">
            <div class="animate-main2-child"></div>
        </div>
        <i class="loading-text">Loading</i>
    </div>-->

</div>
<script>

    var o1 = null;
    var o2 = null;
    function a1(){
        o1 = $.load({
            text:'Loading',
            style:'style1',
            insert:$('#ha'),
            background:"rgba(255, 255, 255, 0.5)"
        })
    }

    function a2(){
        o2 = $.load({
            insert:$('#ha'),
            style:'style2',
            text:'正在指派中'
        })
    }



    function cancel1(){
       o1.close()
    }
    function cancel2(){
        o2.close()
    }
</script>
</body>
</html>